var InputList = Backbone.View.extend({
	initialize : function() {
		this.render();
	},
	renderInputs : function() {
		this.lineGrid = new ZoomGrid({
			container : $(".line-editor",this.$el)[0], //this.inputs[0],
			rows : 1,
			foldedSize : {
				width : 120,
				height : 35
			},
			paddingMarginBorder : {
				width : 5,
				height : 5
			}
			,zoomOnHover : true
		});
		var step = function(w, c) {
			// console.log($('span.add-on', c).outerWidth())

			$('input', c).stop().animate({
				width : w - $('span.add-on', c).outerWidth() - 13
			});
		};
		this.lineGrid.zoomStep = step;
		this.lineGrid.restoreStep = step;
		this.lineGrid.restore();
	},
	render : function() {
		var html = _.template($("#line_template").html(), this.model.toJSON()
		// , {variable : 'data'}
		);
		this.blockName = this.model.get('block');
		this.inputs = $(html);
		this.$el.html(this.inputs);
		this.result = this.options.result;
		// this.combos=[];
		// var comboModels = _.filter(this.model.get('fields'), function(n){
			// return n[3]
		// })
		var t = this;
		// $('.combo', this.$el).each(function(index) {
		// 	t.combos.push(new ComboBox({
		// 		el : this,
		// 		data : {hint:comboModels[index][0], opts:comboModels[index][3]}
		// 	}).register(t));		  
		// });


		setTimeout(function() {
			t.renderInputs();
		}, 300);

		var mod = this.blockName;
		$('input', this.inputs).keyup(function() {
			ViewData[mod].search.val = $(this).val();
			if ($(this).val() == $(this).attr('v'))
				return;
			$(this).attr('v', $(this).val());				
			var len = $(this).val().length;

			var count = 0, item, max=0;				
			for(var i = 0; i<$('input', t.inputs).length;i++){
				item = $('input', t.inputs).eq(i);
				var l = item.val().trim().length;
				if($(this).not(item) && l>0)
					count++;
				if(l>max)
					max = l;
			}
			if (len < 2 && max < 2) {
				util.alert(ViewData.err.char2, t.result);
				// ViewData[mod].alert.set('msg', ViewData.err.char2);
				// if(!t.alert)
				// 	t.alert = new Alert({
				// 		el: t.$el.next()
				// 		, model: ViewData[mod].alert
				// 	});
				
				// var rs = $('[name=' + t.blockName + '] .result-table', t.inputs);
				// util.alert("The input length should be <strong> at least 2</strong> characters", rs).alert();
			} else {
				var local = count > 0;
				if(!t.inputs.attr("v"))
					local = false;
				if($(this).attr("col")==t.inputs.attr("col") && $(this).val().indexOf(t.inputs.attr("v")) !== 0)
					local = false;
				t.search( $(this), local);
			}

			
		}).mouseenter(function() {
			this.select();
		}).mouseleave(function() {
			this.blur();
		});

	},
	search: function(input, local){
		var i = input.attr('colid')-0;
		var val = input.val();
		var v = util.encodeQuery(val);
		var prop = input.attr('col');
		var cache = {"Root":"rc", "URIC":"uc"};
		if(local){
			var data = util[cache[this.blockName]][this.inputs.attr("colid")-0][this.inputs.attr("v")];//ViewData.root.table.get('data');
			var t = this;
			data = _.filter(data, function(n){
				var v = true;
				$('input', t.inputs).each(function(){
					v = v && (n[$(this).attr('colid')-0].indexOf($(this).val())>-1);
				});
				return v;
			});
			ViewData[this.blockName].table.set('data',data);
		}
		else{
			if(!input.attr('sug')){
				if(!util[cache[this.blockName]][i])
					util[cache[this.blockName]][i] ={};
				if(!util[cache[this.blockName]][i][v]){
					util.call(util.getUrl(this.blockName, prop, v)+"?callback=util['"+cache[this.blockName]+"']["+i+"]['"+val+"']=jsonp."+this.blockName);
					this.inputs.attr({'col': prop, 'v':val, 'colid':i});
				}
				else
					jsonp[this.blockName](util[cache[this.blockName]][i][v]);
			}
			else{
				ViewData[this.blockName].alert.set('msg', ViewData.err.notsupportquery);
			}
		}
	}
	
});
